<template>
    <div class="assignment-header">
        <button class="back-button" @click="$router.push('/teacher/dashboard')">← 返回</button>
         <div class="user-info" @click="toggleDropdown">
          <img class="avatar" src="@/assets/images/rainbow.jpg" alt="User Avatar">
          <span class="username">当前用户</span>
          <img class="dropdown-arrow" src="@/assets/svgs/downnarrow.svg" alt="Dropdown Arrow">
          <div v-if="dropdownVisible" class="dropdown-menu">
            <p @click="navigateTo('profile')">个人信息</p>
            <p @click="navigateTo('logout')">退出登录</p>
          </div>
        </div>
    </div>
   
    <div class="check-in-system">
        <div class="signed">
            <h3>已签到 (4人)</h3>
            <ul>
                <li v-for="person in signedUsers" :key="person.name">
                    {{ person.name }}
                </li>
            </ul>
        </div>
        <div class="signed-right">
        <div class="unsigned">
            <h3>未签到 (2人)</h3>
            <ul>
                <li v-for="person in unsignedUsers" :key="person.name">
                    {{ person.name }}
                </li>
            </ul>
        </div>
        <div class="duration-control">
            <p>签到时长</p>
            <span>{{ formattedTime }}</span>
            <el-button @click="addMinute">+1分钟</el-button>
            <el-button @click="subtractMinute">-1分钟</el-button>
            <br>
            <el-button @click="startCountdown">开始签到</el-button>
            <el-button type="primary" @click="endCheckIn">结束签到</el-button>
        </div>
    </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref, computed  } from 'vue';
import { useRouter } from 'vue-router';

const dropdownVisible = ref(false);
const toggleDropdown = () => {
  dropdownVisible.value = !dropdownVisible.value;
};
const router = useRouter();
const signedUsers = ref([
    { name: '王小明' },
    { name: '李华' },
    { name: '张三' },
    { name: '李四' }
]);

const unsignedUsers = ref([
    { name: '赵六' },
    { name: '钱七' }
]);

const timeLeft = ref(5 * 60); // 初始签到时长为5分钟，单位为秒

const isCounting = ref(false); // 控制计时器是否启动

const formattedTime = computed(() => {
  const minutes = Math.floor(timeLeft.value / 60);
  const seconds = timeLeft.value % 60;
  return `${minutes}分钟 ${seconds}秒`;
});

const startCountdown = () => {
    isCounting.value = true;
    ElMessage.success('签到开始');
    intervalId = setInterval(() => {
        if (timeLeft.value > 0) {
            timeLeft.value--;
        } else {
            ElMessage.success('签到超时');
        }
    }, 1000);
};



const addMinute = () => {
  timeLeft.value += 60; // 增加1分钟
};

const subtractMinute = () => {
  if (timeLeft.value > 60) {
    timeLeft.value -= 60; // 减少1分钟
  }
};

const endCheckIn = () => {
    // 结束签到的逻辑
    clearInterval(intervalId);
    isCounting.value = false;
    ElMessage.success('签到结束');
    // router.push('/teacher/dashboard');
};

let intervalId = setInterval(() => {
  if (timeLeft.value > 0) {
  } else {
    clearInterval(intervalId);
    ElMessage.success('签到超时');
  }
}, 1000);
</script>

<style scoped>
.assignment-header {
    display: flex;
    height: 7lvh;
    width: 100lvw;
    background-color: #13227A;
    color: white;
}

.back-button {
    background-color: transparent;
    margin-left: 1%;
    width: 5%;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
}

.back-button:hover {
    color: #d72d2d;
}


.user-info {
  position: relative;
  align-items: center;
  cursor: pointer;
  display: flex;
  margin-left: 81%;
  z-index: 999;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.dropdown-arrow {
  width: 16px;
  height: 16px;
  margin-left: 5px;
}

.username {
  font-size: 16px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  color: black;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1000;
}
.check-in-system {
    display: flex;
    background-color: #ececec;
    width: 100lvw;
    height: 93lvh;
}

.signed {
    float: left;
    padding-left: 2%;
    margin-top: 1%;
    margin-left: 1%;
    width: 70%;
    height: 61%;
    background-color: #ffffff;
    border: 1xp solid #2e2e2e;
}
.signed-right{
    float: left;
    margin-top: 1%;
    width: 29%;
    height: 61%;
}
.unsigned {
    float: left;
    padding-left: 4%;
    margin-left: 2%;
    width: 95%;
    background-color: #ffffff;
}

.duration-control {
    float: left;
    margin-top: 0.5%;
    margin-left: 2%;
    width: 95%;
    height: 37%;
    background-color: #ffffff;
    text-align: center;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin-right: 10px;
    background-color: #f4f4f4;
    padding: 5px 10px;
    border-radius: 5px;
}

.duration-control {
    margin-top: 20px;
}

.el-button {
    margin: 5px 5px;
}
</style>